<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <link rel="Stylesheet" type="text/css" href="/content/ext-all.css" />
    <script type="text/javascript" src="/scripts/ext-all.js"></script>
    <script type="text/javascript">
        Ext.require(['Ext.data.*', 'Ext.grid.*']);

        Ext.define('Project', {
            extend: 'Ext.data.Model',
            fields: ["ID", 'Name']
        });

        Ext.onReady(function () {

            var store = Ext.create('Ext.data.Store', {
                autoLoad: true,
                autoSync: true,
                model: 'Project',
                headers: {
                    "Accept": "application/json"
                },
                proxy: {
                    type: 'rest',
                    url: '/api/project',
                    reader: {
                        type: 'json',
                        root: 'data'
                    },
                    writer: {
                        type: 'json'
                    }
                },
                listeners: {
                    write: function (store, operation) {
                        var record = operation.getRecords()[0],
                    name = Ext.String.capitalize(operation.action),
                    verb;


                        if (name == 'Destroy') {
                            record = operation.records[0];
                            verb = 'Destroyed';
                        } else {
                            verb = name + 'd';
                        }
                        Ext.example.msg(name, Ext.String.format("{0} user: {1}", verb, record.getId()));

                    }
                }
            });

            var rowEditing = Ext.create('Ext.grid.plugin.RowEditing');

            var grid = Ext.create('Ext.grid.Panel', {
                renderTo: document.body,
                plugins: [rowEditing],
                width: 400,
                height: 300,
                frame: true,
                title: 'Projects',
                store: store,
                iconCls: 'icon-user',
                columns: [{
                    text: 'ID',
                    width: 40,
                    sortable: true,
                    dataIndex: 'ID'
                }, {
                    text: 'Name',
                    flex: 1,
                    sortable: true,
                    dataIndex: 'Name',
                    field: {
                        xtype: 'textfield'
                    }
                }],
                dockedItems: [{
                    xtype: 'toolbar',
                    items: [{
                        text: 'Add',
                        iconCls: 'icon-add',
                        handler: function () {
                            // empty record
                            store.insert(0, new Project());
                            rowEditing.startEdit(0, 0);
                        }
                    }, '-', {
                        text: 'Delete',
                        iconCls: 'icon-delete',
                        handler: function () {
                            var selection = grid.getView().getSelectionModel().getSelection()[0];
                            if (selection) {
                                store.remove(selection);
                            }
                        }
                    }]
                }]
            });
        });
    </script>
    <title>RestUpMVC Sample Web Application</title>
</head>
<body style="padding: 20px">
    
</body>
</html>
